import React, { Component } from 'react';
import { is, fromJS } from 'immutable';
import ReactDOM from 'react-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

const defaultStyle = {
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  background: 'rgba(0, 0, 0, 0.3)',
};

let defaultState = {
  alertStatus: false,
  alertTip: '提示',
  closeDialog: function () {},
  childs: '',
};

class Dialog extends Component {
  state = {
    ...defaultState,
  };

  // css动画组件设置为目标组件
  FirstChild = (props) => {
    const childrenArray = React.Children.toArray(props.children);
    return childrenArray[0] || null;
  };

  //打开弹窗
  open = (options) => {
    options = options || {};
    options.alertStatus = true;
    var props = options.props || {};
    var childs = this.renderChildren(props, options.childrens) || '';
    console.log(childs);
    this.setState({
      ...defaultState,
      ...options,
      childs,
    });
  };

  //关闭弹窗
  close() {
    this.state.closeDialog();
    this.setState({
      ...defaultState,
    });
  }

  renderChildren(props, childrens) {
    //遍历所有子组件
    var childs = [];
    childrens = childrens || [];
    var ps = {
      ...props, //给子组件绑定props
      _close: this.close, //给子组件也绑定一个关闭弹窗的事件
    };
    childrens.forEach((currentItem, index) => {
      childs.push(
        React.createElement(currentItem, {
          ...ps,
          key: index,
        })
      );
    });
    return childs;
  }

  shouldComponentUpdate(nextProps, nextState) {
    return (
      !is(fromJS(this.props), fromJS(nextProps)) ||
      !is(fromJS(this.state), fromJS(nextState))
    );
  }

  render() {
    return (
      <ReactCSSTransitionGroup
        component={this.FirstChild}
        transitionName="hide"
        transitionEnterTimeout={300}
        transitionLeaveTimeout={300}
      >
        <div
          // onClick={this.close.bind(this)}
          className="dialog-con"
          style={
            this.state.alertStatus
              ? { display: 'block', ...defaultStyle }
              : { display: 'none', ...defaultStyle }
          }
        >
          {this.state.childs}
        </div>
      </ReactCSSTransitionGroup>
    );
  }
}

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  showValue = () => {
    this.props.showValue && this.props.showValue();
    console.log(this);
  };
  render() {
    return (
      <div className="Child">
        <div className="content">
          Child
          <button onClick={this.showValue}>调用父的方法</button>
        </div>
      </div>
    );
  }
}

let div = document.createElement('div');
let props = {};
document.body.appendChild(div);

let Box = ReactDOM.render(React.createElement(Dialog, props), div);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  myalert = () => {
    Box.open({
      children: [Child],
      props: {
        showValue: function () {
          console.log('dialog嵌套子组件');
        },
        closeDialog: function () {
          // 关闭弹窗回调
        },
      },
    });
  };

  render() {
    return (
      <div>
        app <button onClick={this.myalert}>点击</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
